$telegram-bar-color: white;
$telegram-highlighted-bar-color: currentColor;

.telegram-rotate-component {
	&__bars {
		cursor: grab;
		width: 100%;
		display: flex;
		min-width: 0;
		position: relative;
		height: 15px;
		&--dragging {
			cursor: grabbing !important;
		}
	}
	&__bar {
		position: absolute;
		left:0;
		height: 15px;
		width: 3px;
		flex-shrink: 0;
		top: 50%;
		transform: translateY(-50%);
		background: $telegram-bar-color;
		&--highlighted {
			background-color: $telegram-highlighted-bar-color;
		}
		&--zero {
			height: 20px;
		}
	}
	&__value {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 3px;
		background-color: $telegram-highlighted-bar-color;
		color: $telegram-highlighted-bar-color;
		height: 25px;
		border-radius: 2px;
	}
	&__value-number {
		position: absolute;
		top: -20px;
		color: inherit;
		left: 50%;
		transform: translateX(-50%);
		font-size:12px;
	}
}

body {
	&.dragging {
		cursor: grabbing  !important;
	}
}
